import React, { ReactElement,useEffect,useState } from 'react'
import { Form, Input, Button,message,Radio,Upload } from 'antd';
import {Link, Redirect,useHistory} from "react-router-dom"
import {useDispatch, useSelector,connect} from "react-redux"
import storageUtils from '../../utils/storageUtils';
import Logo from "../../assets/images/logo.png"
import Footer from "../../components/footer"
import UploadFile from "../../components/upload"
import  "./login.less"
import {
  UserOutlined,
  LockOutlined,
  MobileOutlined,
  MailOutlined,
  QuestionCircleOutlined,
  UploadOutlined
} from '@ant-design/icons';

interface Props {
    
}

type FormValueType = {
    username: string;
    password: string;
  };

type FormShopType = {
  shopName:string
  tel:string
  address:string
  idCard:string
  managerName:string
  licenceNo:string
  type:string
  licenceImg:any
  idCardImg:any
}
  export default function Login({}: Props): ReactElement {
    const dispatch = useDispatch();
    const history = useHistory();
    const [account, setAccount] = useState(true)
    const [showLogin, setShowLogin] = useState(true)

    const { token } = useSelector((state: States) => state.usersRC);
    // const token = storageUtils.getStorage('token');

    const onFinish = async(values: FormValueType)=>{
        await dispatch({
            type: 'loginSaga',
            payload: values,
          });
  //         if (token) {
  //         history.push("/home")
  // }
    }

    const  onFinish2 = (shop:FormShopType)=>{
      // console.log(shop);
      shop = {...shop,licenceImg:shop.licenceImg.file.name,idCardImg:shop.idCardImg.file.name}
      
      dispatch({
            type: 'shopSaga',
            payload: shop,
          });
    }

    type States ={
      // user:Array
      usersRC:usesRCS
    }
    
    type usesRCS = {
      messages:string
      token:string
      userInfo:null
    }

    const result = useSelector((state:States)=>{
      console.log(state.usersRC);
      if(state.usersRC.token){
      storageUtils.setStorage("token",state.usersRC.token)
      storageUtils.setStorage("userInfo",state.usersRC.userInfo)
      }
      if(state.usersRC.messages == "认证成功"){
        // message.success("登录成功")
        history.push("/home")
      }
  })

//   useEffect(() => {
//     if (token) {
//     history.push("/home")
//   }
// },[token]);


const showPhone = ()=>{
  setAccount(false)
}
const showAccount = ()=>{
  setAccount(true)
}
const getYZM =()=>{
  message.warn("暂未开放")
}

const showLogins = ()=>{
  setShowLogin(true)
}

const showAdd = ()=>{
  setShowLogin(false)
}
    return (
        <div className="box">
            <div className="form">
          <div className="bigLogo">
            <img src={Logo} alt="" />
            <h1>赤兔养车</h1>
          </div>
          <div className={showLogin?"title":"title show"}>
            <span className={account?"active":""} onClick={showAccount}>账号密码登录</span>
            <span className={account?"":"active"} onClick={showPhone}>手机号码登录</span>
          </div>
            <Form name="normal_login" className={showLogin?"login-form":"login-form show"} onFinish={onFinish}>

            <div className={account?"":"unShow"}>
            <Form.Item
              name="username"
              initialValue="bobo"
              rules={[
                {
                  required: true,
                  message: '用户名不能为空',
                },
              ]}
            >
              <Input prefix={<QuestionCircleOutlined />} className="input" placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              initialValue="1234qwer"
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                className="input"
              />
            </Form.Item>
            </div>

            <div className={account?"unShow":""}>
            <Form.Item
              name="phone"
              rules={[
                {
                  required: false,
                  message: '手机号不能为空',
                },
              ]}
            >
              <Input prefix={<MobileOutlined />} className="input" placeholder="手机号" />
            </Form.Item>
            <Form.Item
              name="yzm"
              rules={[
                {
                  required: false,
                  message: '验证码不能为空',
                },
              ]}
            >
              <Input
                prefix={<MailOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="验证码"
                className="input yzminput"
              />
              <Button
                className="yzm"
                onClick={getYZM}
              >
                获取验证码
              </Button>
            </Form.Item>
            </div>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
              </Button>
            </Form.Item>
            <Form.Item className="bottom">
              <Link to="/register">注册账户</Link>
              <a onClick={showAdd}>商家入驻</a>
            </Form.Item>
          </Form>
            {/* <footer className="footer">
            Copyright @ 2021 <a href="http://www.woniuxy.com/">admin</a>
            </footer> */}


<Form name="normal_login" className={showLogin?"login-form  show":"login-form"} onFinish={onFinish2}>

<Form.Item name="type" label="商铺类型" initialValue="0" rules={[
            {
              required: true,
              message: '商铺类型不能为空',
            },
          ]}>
        <Radio.Group>
          <Radio value="0">充电站</Radio>
          <Radio value="1">其他</Radio>
        </Radio.Group>
      </Form.Item>
        
        <Form.Item
        label="店铺名"
          name="shopName"
          initialValue="赤兔"
          rules={[
            {
              required: true,
              message: '店铺名不能为空',
            },
          ]}
        >
          <Input className="input" placeholder="店铺名" />
        </Form.Item>
        <Form.Item
          name="tel"
          label="手机号"
          initialValue="16666666666"
          rules={[
            {
              required: true,
              message: '手机号不能为空',
            },
          ]}
        >
          <Input
            placeholder="手机号"
            className="input"
          />
        </Form.Item>
        <Form.Item
        label="店铺地址"
          name="address"
          initialValue="成都市"
          rules={[
            {
              required: true,
              message: '店铺地址不能为空',
            },
          ]}
        >
          <Input
            placeholder="店铺地址"
            className="input"
          />
        </Form.Item>
        <Form.Item
        label="注册人"
          name="managerName"
          initialValue="小飞飞"
          rules={[
            {
              required: true,
              message: '注册人不能为空',
            },
          ]}
        >
          <Input
            placeholder="注册人"
            className="input"
          />
        </Form.Item>
        <Form.Item
        label="身份证号"
          name="idCard"
          initialValue="1234567890"
          rules={[
            {
              required: true,
              message: '身份证号不能为空',
            },
          ]}
        >
          <Input
            placeholder="身份证号"
            className="input"
          />
        </Form.Item>

        <Form.Item
        label="身份证照片"
          name="idCardImg"
          rules={[
            {
              required: true,
              message: '身份证照片不能为空',
            },
          ]}
        >
          {/* <UploadFile></UploadFile> */}
          <Upload name="idCardImg" action="http://47.98.128.191:3000/images/uploadImages" listType="picture">
          <Button icon={<UploadOutlined />}>点击上传图片</Button>
        </Upload>
        </Form.Item>

        <Form.Item
        label="营业执照编号"
          name="licenceNo"
          initialValue="789645665464"
          rules={[
            {
              required: true,
              message: '营业执照编号不能为空',
            },
          ]}
        >
          <Input
            placeholder="营业执照编号"
            className="input"
          />
        </Form.Item>

        <Form.Item
        label="营业执照照片"
          name="licenceImg"
          rules={[
            {
              required: true,
              message: '营业执照照片不能为空',
            },
          ]}
        >
          {/* <UploadFile></UploadFile> */}
          <Upload name="licenceImg" action="http://47.98.128.191:3000/images/uploadImages" listType="picture">
          <Button icon={<UploadOutlined />}>点击上传图片</Button>
        </Upload>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="apply-form-button"
          >
            立即申请
          </Button>
          <a onClick={showLogins}>使用已有账号登录</a>
        </Form.Item>
      </Form>
            </div>
            <Footer></Footer>
        </div>
    )
}

// type States ={
//   // user:Array
//   usersRC:usesRCS
// }

// type usesRCS = {
//   token:string
//   userInfo:null
// }

// const mapStateToProps = (state:States)=>{
//   return {
//       token:state.usersRC.token,
//       userInfo:state.usersRC.userInfo
//   }
// }
// export default connect(mapStateToProps)(Login)
